<link rel="stylesheet" type="text/css" href="__STATIC__/api/css/style.css" />
<script src="__STATIC__/api/js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/api/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        
        <div class="layui-form-item">
            <label class="layui-form-label">模板名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input"  placeholder="请输入模板名称" value="" lay-verify="required" autocomplete="off">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">模板内容</label>
            <div class="layui-input-block">
                <input type="hidden" name="star_names" class="layui-input"  placeholder="请输入五星打分名称" value=""  >
                <!--自定义-->
                <div class="zdywx">
                    <p class="title"><span>-</span>自定义五星<span>-</span></p>
                    <div class="tags">

                        <div id="opts"></div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12  col-xs-12">
                                <div class="form-group">

                                    <button id="fat-btn" class="layui-btn layui-btn-normal layui-btn-sm"
                                            type="button">添加
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

<!--        <div class="layui-form-item layui-form-text">-->
<!--            <label class="layui-form-label">备注</label>-->
<!--            <div class="layui-input-block">-->
<!--                <textarea name="remark" class="layui-textarea"  placeholder="请输入备注" autocomplete="off"></textarea>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">二维码</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="qr_code" class="layui-input"  placeholder="请输入二维码" value="">-->
<!--            </div>-->
<!--        </div>-->
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit onclick="tj_qianzhi()" lay-filter="*">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
<script src="/static/plugs/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>


    function tj_qianzhi()
    {
        var arr = [];
        $("input[name='star_name']").each(function(){
            if($(this).val()){
                arr.push($(this).val());
            }

        })

        // console.log(arr);
        $("[name='star_names']").val(arr);
        // var arr_box = [];
        // $('input[type=checkbox]:checked').each(function(i,v) {
        //     arr_box.push( $(this).val());
        //
        // });
        // $("[name='xz_fields']").val(arr_box);
        // layui.use('form', function(){
        //     var form = layui.form,
        //         $ = layui.$;
        //     //各种基于事件的操作。
        //     form.on('submit(*)', function(data){
        //         console.log(data.field)
        //         $("[name='all_fields']").val(data.field);
        //         //将页面全部复选框选中的值拼接到一个数组中
        //         var arr_box = [];
        //         $('input[type=checkbox]:checked').each(function(i,v) {
        //             console.log(v.name)
        //
        //             arr_box.push( $(this).val());
        //         });
        //
        //         $("[name='xz_fields']").val(arr_box);
        //         //数组
        //         console.log(arr_box);
        //         // ["董先生的CSDN"]
        //         // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        //     });
        // });
    }
    function getSatrtInfo(){
        var arr = [];
        $("input[name='star_name']").each(function(){
            if($(this).val()){
                arr.push($(this).val());
            }

        })
        console.log(arr);return false;
        // console.log(star_name);return false;

        $("[name='star_names']").val(arr);
    }
    function del(obj){
        $(obj).parents(".row").remove();
    }
    $(function() {


        $("#fat-btn").click(function(e) {
            console.log(e)
            if($(".number:last").val() == "") {
                layer.msg('请输入五星打分名称', {
                    icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    //do something
                });
            } else {
                var htm = "";
                htm += "    <div class='row'>";
                htm += "    <div class='form-group'>";
                htm += "    <div class='col-md-4 col-sm-4  col-xs-4'>";
                htm += "    <input type='text' style='display:inline-block;width:80%' name='star_name' class='layui-input number' placeholder='请输入五星评分名称' id='' autocomplete='off'>";
                // htm += "    <a href='#'  class='mar_l10' onclick='del(this)' style='float:none'><i class='fa fa-minus' style='color:#8B0000'></i>  </a>";

                htm += "     <div class='xzbq'>";
                htm += "     <p class='title''><span>-</span>选择任一标签<span>-</span></p>";
                // htm += "     <div class='tags'>";
                // htm += "     <div><input name='fields[]' value=''></div>";
                htm += "     <div class='layui-input-block'>";
                // htm += "     <li class='off' name='评价内容' onclick='xz_content(this)'>评价内容</li>";
                // htm += "     <li name='发图/视屏' onclick='xz_image(this)'>发图/视屏</li>";
                // htm += "     <li name='是否匿名' onclick='xz_anonymous(this)'>是否匿名</li>";
                htm += "     <input lay-filter='switchTest' type='checkbox' name='fields[]' lay-skin='primary'  value='评价内容' title='评价内容' lay-verify='required' />";
                htm += "     <input lay-filter='switchTest'  type='checkbox' name='fields[]' lay-skin='primary'  value='发图/视屏' title='发图/视屏' lay-verify='required' />";
                htm += "     <input lay-filter='switchTest' type='checkbox' name='fields[]' lay-skin='primary'  value='是否匿名' title='是否匿名' lay-verify='required' />";

                // htm += "     </div>";
                htm += "       </div>";
                htm += "       </div>";
                htm += "    </div></div>";
                htm += "    </div>";
                $('#opts').append(htm);
                $("#opts").trigger("create");
                layui.use('form',function(){
                    const form = layui.form;
                    form.render();
                });
            }
        });

    });
</script>
<!--<script type="text/javascript">-->
<!--    layui.use('form',function(){-->
<!--        const form = layui.form;-->
<!--        form.render();-->
<!--    });-->
<!--</script>-->